<template>
    <el-drawer
    :title="this.$t('titles.trajectoryDetail')"
    :visible.sync="drawer"
    :close-on-press-escape="false"
    custom-class="authorBox"
    :wrapperClosable="closable"
    :show-close="showClose"
    :direction="direction"
    @close="closeDrawer">
        <div class="trajectoryBox">
            <div class="goHere" @click.self="goHere(trajectoryForm.name)"></div>
            <div class="editBox">
                <el-switch v-model="edit" inactive-text="修改" active-text="" active-color="#409EFF"></el-switch>
            </div>

            <div class="trackForm">
                <el-form ref="ruleForm" :model="trajectoryForm" class="wifiForm">
                    <el-form-item class>
                        <div class="flex formItem">
                            <div class="itemLeft">{{ this.$t("titles.trajectoryName")}}</div>
                            <div class="itemRight">
                                <input type="text" :placeholder="this.$t('placeholder.trajectoryName')" v-model="trajectoryForm.name" :disabled="!edit">
                            </div>
                        </div>
                    </el-form-item>

                    <div class="showMore" v-show="showMore" @click="showMoreBtn">查看更多<i class="el-icon-d-arrow-right moreIcon"></i></div>
                    <div v-show="!showMore">
                    <el-form-item>
                        <div class="flex formItem">
                            <div class="itemLeft">{{this.$t("titles.selectWaypoints")}}</div>
                            <div class="itemRight">
                                <el-select
                                v-model="trajectoryForm.waypoints"
                                :placeholder="this.$t('placeholder.selectWaypoints')"
                                multiple
                                size="mini"
                                class="waypointSelect"
                                popper-class="selectClass"
                                @keyup.enter="subUpdate"
                                :disabled="!edit"
                                >
                                <el-option
                                    v-for="(item,index) in this.$store.state.stationList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.name"
                                ></el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-form-item>
                    </div>
                    <div class="flex formBtns" v-show="edit">
                        <el-button type="primary" @click="subUpdate">{{this.$t("buttons.submit")}}</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { showTrajectoryDetail, submitAddTrack, navTrack } from '../js/trajectory'
export default {
    name: 'trajectoryDetail',
    components:{

    },
    data(){
        return{
            drawer: this.$store.state.showTrajectory,
            direction: 'btt',
            closable: true,
            showClose: false,

            showMore: true,

            edit: false,
            trajectoryForm: {
                name: "",
                waypoints: []
            }
        }
    },
    methods:{
        //提交
        subUpdate() {
            submitAddTrack(this.trajectoryForm);
        },

        //点击站点去这里
        goHere(name){
            this.$notify({
                title: this.$t("titles.success"),
                message: this.$t("messages.navTrajectory") + " " + name,
                type: 'success',
                position: 'top-left',
                offset: 100
            });
            navTrack(name);
            showTrajectoryDetail(false);
        },

        //显示更多
        showMoreBtn:function(){
            this.showMore = false;
        },

        //关闭模态框
        closeDrawer: function(){
            showTrajectoryDetail(false);
            this.showMore = true;
        }
    },

    //属性监听
    watch:{
      "$store.state.showTrajectory": function(val){
           this.drawer = val;
        },

        //轨迹详情
        '$store.state.trackDetail':function(val){
            console.log(val)
            this.trajectoryForm.name = val.name;

            let waypointsArr = [];
            if(val.waypoints.length !== 0){
                val.waypoints.forEach(element => {
                    waypointsArr.push(element.name);
                });
                this.trajectoryForm.waypoints = [...new Set(waypointsArr)];
            }
       }
    },


}
</script>

<style scoped lang="less">
.trajectoryBox{
    padding: 0 15px;
    position: relative;
    .editBox{
        position: absolute;
        left: 15px;
        top: -52px;
    }
    .goHere{
        position: absolute;
        width: 50px;
        height: 50px;
        background: url("../../src/assets/go.png") no-repeat center;
        background-size: cover;
        right: 15px;
        top: -60px;
    }
    .showMore{
        text-align: center;
        color: #409EFF;
        padding-top: 5px;
        .moreIcon{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg);
            -o-transform:rotate(90deg);
        }
    }
    .formItem {
        border-bottom: 1px solid #eeeeee;
    .itemLeft {
      flex: 4;
    }
    .itemRight {
      height: 100%;
      flex: 6;
      input {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .waypointSelect {
      display: flex;
      justify-content: center;
      min-height: 40px;
    input {
      height: 10px;
    }
    .el-input__icon {
      height: inherit;
    }
    .el-input__inner {
      height: normal;
      line-height: normal;
    }
    width: 100%;
    border: none;
    outline: none;
    padding-left: 0.7em;
  }
  .formBtns {
    padding: 0 5px;
    margin-top: 15px;
    button {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 0;
  }

  .el-form-item__content {
    line-height: 20px;
  }
}


 .detailItem{
     justify-content: space-between;
     height: 40px;
     line-height: 40px;
     border-bottom: 1px solid rgba(0,0,0,0.04);
     text-align: left;
 }

 .leftTitle{
     flex: 1;
 }
 .rightTRitle{
     flex: 3;
 }
</style>